<template>
    <div class="main">
        <headerInfo @loginOut="loginOut"></HeaderInfo>
        <searchBar @gotoMainPage='gotoMainPage' 
        :goods_count="myCarCount"
        @searchGoods="searchGoodsName"
        @gotoMyShoppingCar='gotoMyShoppingCar'></SearchBar>
        <navBar :isEnableSpan="false"></navBar>
        <advertising></advertising>
        <goodsListContainer @toGoodsDetail='goToGoodsDetail'></goodsListContainer>
        <Footer></Footer>
    </div>
</template>   

<script>
import router from '../router'
import searchBar from '../components/mainPage/SearchBar.vue'
import navBar from '../components/mainPage/NavBar.vue'
import advertising from '../components/mainPage/Advertising.vue'
import goodsListContainer from "../components/mainPage/GoodsListContainer.vue"

export default {
    name : 'Main',
    data(){
        return {
            'myCarCount':0, 
        }
    },
    methods:{
        gotoMainPage:function(){
            console.log("gotoMainPage")
            // 刷新当前页面
            router.go(0);
        },
        searchGoodsName: function(goods_Name){
            console.log("searchGoods:",goods_Name);
        },
        gotoMyShoppingCar(){
            console.log("gotoMyShoppingCar12");
        },
        loginOut(){
            this.$store.commit('setIsLogin',false);
            this.isLogin = this.$store.state.isLogin;
            router.push('Login');
        },
        goToGoodsDetail(goods){
            router.push({name:'GoodsDetail',params:{id:goods.id,"classId":goods.classId}});
        }
    },
    components:{
        searchBar,
        navBar,
        advertising,
        goodsListContainer,
    }
}

</script>

<style>
.main{
    /* width: 100%; */
    text-align:center;
    margin:0 auto;
}
</style>